<template>
    <div class="home">
      <h1>欢迎来到 Vue Mini-Market</h1>
      <router-link to="/products">浏览产品</router-link>
    </div>
  </template>
  <script>
  export default {
    name: 'Home'
  };
  </script>
  <style>
.home {
    text-align: center; /* 让标题和链接在页面中居中显示 */
    margin-top: 50px; /* 增加与导航栏的间距，使页面布局更合理 */
}

h1 {
    color: #333; /* 设置标题颜色，与整体页面颜色风格协调 */
    font-size: 36px; /* 适当增大标题字体大小，突出显示 */
    margin-bottom: 20px; /* 增加标题与链接之间的间距 */
}

.router-link {
    background-color: #007BFF; /* 设置链接背景色，使其更突出 */
    color: #fff; /* 文字颜色设置为白色，与背景色对比明显 */
    padding: 10px 20px; /* 增加内边距，使链接看起来更饱满 */
    border-radius: 5px; /* 添加圆角，使链接更美观 */
    font-size: 20px; /* 适当增大字体大小，提高可读性 */
    transition: background-color 0.3s ease; /* 添加过渡效果，使鼠标悬停时背景色变化更平滑 */
}

.router-link:hover {
    background-color: #0056b3; /* 鼠标悬停时背景色加深，与之前的样式保持一致 */
}
</style>
  